//施工工期
<template>
  <div class="con" v-loading="loading"
       element-loading-background="rgba(0, 0, 0, 0.1)">
    <div class="workmanship" v-show="!isShowSet">
      <div class="workmanship_tit">
        <span><i></i>{{ form.title }}</span>
      </div>
      <div class="workmanship_con">
        <div class="chartBox clearfix">
          <div class="chartBox_l">
            <div id="pie" style="width: 100%; height: 100%"></div>
          </div>
          <div class="chartBox_r">
            <p class="p1">{{ form.data_name }}</p>
            <p class="p2" v-if="form.punctual">{{ form.punctual }}%</p>
          </div>
        </div>
        <div class="synopsis">
          <div id="period" style="width: 100%; height: 100%"></div>
        </div>
      </div>
    </div>
    <div class="workmanship editBox" v-show="isShowSet">
      <span @click="dialogVisible = true">编辑</span>
    </div>
    <el-dialog title="栏目设置"
               :close-on-click-modal="false" v-loading="loading"
               :visible.sync="dialogVisible" id="dialogBox">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="栏目标题">
          <el-input v-model="editFrom.title" class="inputDiv"></el-input>
        </el-form-item>
        <el-form-item label="完工">
          <el-input v-model="editFrom.data_name" class="inputDiv"></el-input>
          <el-input-number class="inputDiv ml40" v-model="editFrom.punctual" :min="1" :max="100"
                           label="描述文字"></el-input-number>
          %
        </el-form-item>

        <el-form-item label="数据方式：">
          <el-radio-group v-model="editFrom.view_type">
            <el-radio label="1">施工周期</el-radio>
            <el-radio label="2">施工状态</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 施工周期 -->
        <div v-if="editFrom.view_type === '1'">
          <el-form-item label="2个月：">
            <el-input-number
                v-model="editFrom.wdate.two"
                :min="0"
                :max="100"
                placeholder="2个月"
                class="inputDiv"
            ></el-input-number>
            %
          </el-form-item>
          <el-form-item label="3个月：">
            <el-input-number
                v-model="editFrom.wdate.three"
                :min="0"
                :max="100"
                placeholder="3个月"
                class="inputDiv"
            ></el-input-number>
            %
          </el-form-item>
          <el-form-item label="4个月：">
            <el-input-number
                v-model="editFrom.wdate.four"
                :min="0"
                :max="100"
                placeholder="4个月"
                class="inputDiv"
            ></el-input-number>
            %
          </el-form-item>
          <el-form-item label="超4个月：">
            <el-input-number
                v-model="editFrom.wdate.overFour"
                :min="0"
                :max="100"
                placeholder="超4个月"
                class="inputDiv"
            ></el-input-number>
            %
          </el-form-item>
        </div>
        <!-- 施工状态 -->
        <div v-if="editFrom.view_type === '2'">
          <el-form-item label="数据方式：">
            <el-radio-group v-model="editFrom.datatype">
              <el-radio label="0">固定数据</el-radio>
              <el-radio label="1">系统数据</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="editFrom.datatype === '0'">
            <el-form-item label="在施工：">
              <el-input
                  v-model="editFrom.stop.doing"
                  placeholder="在施工"
                  class="inputDiv"
              ></el-input>
            </el-form-item>
            <el-form-item label="停工超3天：">
              <el-input
                  v-model="editFrom.stop.day3"
                  placeholder="停工超3天"
                  class="inputDiv"
              ></el-input>
            </el-form-item>
            <el-form-item label="停工超7天：">
              <el-input
                  v-model="form.stop.day7"
                  placeholder="停工超7天"
                  class="inputDiv"
              ></el-input>
            </el-form-item>
            <el-form-item label="停工超15天：">
              <el-input
                  v-model="editFrom.stop.day15"
                  placeholder="停工超15天"
                  class="inputDiv"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <!-- 施工状态 -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="text" @click="dialogVisible = false">取消</el-button>
        <el-button type="text" @click="submit(1)">保存继续编辑</el-button>
        <el-button type="text" @click="submit(2)">保存返回主页</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {constructionRequest, SCREEN_CODE} from "@/utils/http/request";

export default {
  data() {
    return {
      chart1: null,
      chart2: null,
      loading: false,
      dialogVisible: false,
      form: {
        datatype: "",
        title: "", //标题
        view_type: "", //显示数据类型（1：施工工期 2：无人施工
        punctual: "", //准时完工率
        data_name: "", //准时完工名称
        wdate: {
          two: null,
          three: null,
          four: "",
          overFour: ""
        }, //工期数据
        stop: {
          doing: '',
          day3: '',
          day7: '',
          day15: ''
        }, //无人施工数据（施工状态 ）
      },
      editFrom: {},
      xAxisData: ["2个月", "3个月", "4个月", "超四个月"],
      yAxisData: [],
      pieList: [],//饼图
    };
  },
  props: ["isShowSet"],
  created() {
    this.getData();
  },
  watch: {
    isShowSet() {
      setTimeout(() => {
        if (this.chart1) {
          this.drawLine()
          this.chart1.resize()
        }
        if (this.chart2) {
          this.histogram()
          this.chart2.resize()
        }
      }, 200)
    },
    dialogVisible(val) {
      if (val) {
        this.editFrom = {...this.form}
      }
    }
  },
  methods: {
    //获取数据
    getData() {
      this.loading = true
      constructionRequest.WorkDate({
        datatype: "null",
        screenCode: SCREEN_CODE.construction,
      }).then((res) => {
        if (res.code === "01") {
          this.form = {
            ...res,
          };
          this.yAxisData = [res.wdate.two * 1, res.wdate.three * 1, res.wdate.four * 1, res.wdate.overFour * 1];
          this.pieList = [
            {
              value: this.form.stop.doing * 1, name: "在施工"
            },
            {
              value: this.form.stop.day3 * 1, name: "停工超3天"
            },
            {
              value: this.form.stop.day7 * 1, name: "停工超7天"
            },
            {
              value: this.form.stop.day15 * 1, name: "停工超15天"
            },
          ]
          this.drawLine(); //无人施工数据（施工状态
          this.yAxisData.length && this.histogram(); //柱状图
        }
      }).catch(() => {
      }).finally(() => {
        this.loading = false
      });
    },
    //编辑
    submit(val) {
      if ((parseInt(this.editFrom.wdate.four || '0') + parseInt(this.editFrom.wdate.two || '0')
          + parseInt(this.editFrom.wdate.three || '0') + parseInt(this.editFrom.wdate.overFour || '0')) > 100) {
        this.$message.error('施工周期总数大于100%')
        return
      }
      this.loading = true
      constructionRequest
          .WorkDateEdit({
            ...this.editFrom,
            screenCode: SCREEN_CODE.construction,
          })
          .then((res) => {
            if (res.code === "01") {
              this.$message.success(res.msg || "修改成功");
              this.getData();
              this.dialogVisible = false;
              if (val === 2) {
                this.$emit("func1", false); //向父组件传值
              }
            }
          })
          .catch(() => {
          })
    },
    //饼图
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.chart1 = this.$echarts.init(document.getElementById("pie"));
      this.chart1.clear()
      // 绘制图表
      this.chart1.setOption({
        tooltip: {
          //提示框组件
          trigger: "item", //触发类型(饼状图片就是用这个)
          //  formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
        },
        grid: {
          left: "100",
          right: "10",
          top: "30",
          bottom: "10",
          containLabel: true,
        },
        color: ["#48cda6", "#fd87fb", "#11abff", "#ffdf6f", "#968ade"], //手动设置每个图例的颜色
        series: [
          //系列列表
          {
            //    name: "设备状态", //系列名称
            type: "pie", //类型 pie表示饼图
            center: ["50%", "50%"], //设置饼的原心坐标 不设置就会默认在中心的位置
            radius: ["45%", "80%"], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
            itemStyle: {
              //图形样式
              normal: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                label: {
                  //饼图图形上的文本标签
                  show: false, //平常不显示
                },
                labelLine: {
                  //标签的视觉引导线样式
                  show: false, //平常不显示
                },
              },
              emphasis: {
                //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                // label : {  //饼图图形上的文本标签
                //     show : true,
                //     position : 'center',
                //     textStyle : {
                //         fontSize : '10',
                //         fontWeight : 'bold'
                //     }
                // }
              },
            },
            data: this.pieList,
          },
        ],
      });
    },
    histogram() {
      // 基于准备好的dom，初始化echarts实例
      this.chart2 = this.$echarts.init(document.getElementById("period"));
      // 绘制图表
      this.chart2.clear()
      this.chart2.setOption({
        tooltip: {
          // 悬停指示
          trigger: "item",
          // formatter: "{b}: {c}%",
        },
        grid: {
          left: 10,
          right: 10,
          top: 30,
          bottom: 0,
          containLabel: true,
        },
        xAxis: {
          axisLine: {
            show: false, //不显示坐标轴轴线
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
          axisLabel: {
            show: true, //x轴是否显示文字
            textStyle: {
              color: "#42DDFF", //文字颜色
              fontSize: 18,
            },
          },
          splitLine: {
            show: false,
          },
          data: this.xAxisData,
        },
        yAxis: {
          axisLine: {
            show: false, //不显示坐标轴轴线
          },
          axisTick: {
            show: false, //不显示坐标轴刻度
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false, //y轴是否显示文字
            textStyle: {
              color: "#42DDFF", //文字颜色
            },
          },
          type: "value",
        },
        series: [
          {
            data: this.yAxisData,
            // data:[12,12,12,12],
            type: "bar",
            itemStyle: {
              normal: {
                // 定制显示（按顺序）
                color: function (params) {
                  var colorList = ["#7bd0ff", "#df86bd", "#df86bd", "#a785ff"];
                  return colorList[params.dataIndex];
                },
              },
            },
            barGap: "-100%",
            barWidth: "27",
            label: {
              show: true,
              position: "top",
              formatter: "{c}%",
              textStyle: {
                color: "#42DDFF",
                fontSize: 18,
              },
            },
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/base";

.con {
  width: 100%;
  height: 100%;
  font-size: 12px;

  .workmanship {
    height: 100%;

    .workmanship_tit {
      background: url(../../assets/image/title_right.png) no-repeat;
      height: 29px;
      line-height: 12px;
      font-size: $font-sise32;
      font-weight: bold;
      color: #fdf0a8;
      text-align: right;
      padding-right: 8px;

      span {
        i {
          width: 54px;
          height: 16px;
          display: inline-block;
          background: url(../../assets/image/title_right_btn.png) no-repeat;
          margin-right: 10px;
        }
      }
    }

    .workmanship_con {
      height: 100%;

      .chartBox {
        &:after {
          display: none;
        }
      }

      .chartBox {
        height: 45%;
        margin-bottom: 10px;
        display: flex;
        justify-content: space-between;

        .chartBox_l {
          width: 200px;
          height: 100%;
        }

        .chartBox_r {
          height: 100%;
          font-weight: bold;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .p1 {
            font-size: 31px;
            color: #43ddff;
          }

          .p2 {
            font-size: 42px;
            color: #fff;
          }
        }
      }

      .synopsis {
        height: calc(55% - 30px);
      }
    }

    &.editBox {
      background: #384768;
      border: 1px solid #67b1ea;
      color: #6ef7ff;
      font-size: 20px;
      align-items: center;
      display: flex;
      display: -webkit-flex;
      justify-content: center;

      span {
        cursor: pointer;
      }
    }
  }
}
</style>
